<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="90px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="商品SKU条码" prop="productBarCode" label-width="110px">
							<el-input type="text" v-model="queryForm.productBarCode" placeholder="请输入SKU条形码"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="5">
						<el-form-item label="商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品名称"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="5">
						<el-form-item label="兑换状态" prop="exchangeStatus">
							<el-select v-model="queryForm.exchangeStatus" placeholder="请选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option label="可兑换" value="1"></el-option>
								<el-option label="已下架" value="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" @click="submitForm('queryForm')">查询</el-button>
							<el-button @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 列表部分 -->
		<template>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="skuThumbImage" label="缩略图" width="80" align="center">
					<template slot-scope="scope">
						<el-image style="width: 35px; height: 35px" :src="scope.row.skuThumbImage" :preview-src-list="[scope.row.skuThumbImage]"></el-image>
					</template>
				</el-table-column>
				
				<el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="productCode" label="商品编码" align="center" width="140"></el-table-column>
				<el-table-column prop="skuName" label="SKU名称" align="center" width="110"></el-table-column>
				<el-table-column prop="skuCode" label="SKU编码" align="center" width="120"></el-table-column>
				<el-table-column prop="productBarCode" label="SKU条形码" align="center" width="140"></el-table-column>
				
				<el-table-column prop="priceShow" label="原价(元)" align="center" width="90"></el-table-column>
				<el-table-column prop="price" label="销售价(元)" align="center" width="90"></el-table-column>
				<el-table-column prop="couponQuantity" label="兑换用券数量" align="center" width="140">
					<template slot-scope="scope">
						{{scope.row.couponQuantity}}券
					</template>
				</el-table-column>
				<!-- <el-table-column prop="stock" label="库存" align="center"></el-table-column> -->
				
				<el-table-column prop="status" label="sku状态" align="center" width="90">
					<template slot-scope="scope">
						<el-tag size="small" :type="scope.row.status === 1 ? 'success' : 'warning'" disable-transitions>{{scope.row.status==0 ? "下架" : "上架"}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="saleStatus" label="售卖状态" align="center" width="90">
					<template slot-scope="scope">
						<el-tag size="small" :type="scope.row.saleStatus === 1 ? 'success' : 'info'" disable-transitions>{{scope.row.saleStatus == 0 ? "已停售" : "在售中"}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="exchangeChannel" label="兑换状态" align="center" width="120">
					<template slot-scope="scope">
						<el-tag size="small" :type="scope.row.exchangeStatus == 1 ? 'success' : 'info'" disable-transitions>{{scope.row.exchangeStatus == 1 ? "可兑换" : "已下架"}}</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="createTime" label="创建时间" width="95" :formatter="forDateCreate"></el-table-column> -->
				
				<el-table-column label="操作" fixed="right" width="150">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" size="small" @click.native.prevent="edit(scope.row)">修改信息</el-button>
							<!-- <el-button type="primary" plain size="small" @click.native.prevent="viewDetail(scope.row)">查看详情</el-button> -->
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<edit-exchange-product-dialog
				:isShow="isShowEditDialog"
				:item="currentItem"
				@submit="fetchData"
				@close="closeEditDialog"
			></edit-exchange-product-dialog>
		</template>
	</d2-container>
</template>

<script>
	import dayjs from 'dayjs'
	import { exchangeProductList, editExchangeProduct } from '@api/product/productSkuSale'
	import editExchangeProductDialog from './exchangeProductEdit'
	export default {
		components: {
			editExchangeProductDialog,
		},
		data() {
			return {
				queryForm: {
					productName: '',
					productBarCode: '',
					exchangeStatus: '',
					createTimeBegin: '',
					createTimeEnd: ''
				},
				time: [],
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				currentItem: {},
				isShowEditDialog: false,
			}
		},
		methods: {
			fetchData() {
				if(this.loading) {
					return;
				}
				this.loading = true;
				
				exchangeProductList({
					productBarCode: this.queryForm.productBarCode,
					exchangeStatus: this.queryForm.exchangeStatus,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					this.tableData = res.data.content;
					this.total = res.data.total;
					this.loading = false;
				})
				.catch(err => {
					console.log('err', err);
					this.loading = false;
				})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			forDateCreate(row, column) {
				return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
			},
			
			submitForm(formName) {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.fetchData();
			},
			
			viewDetail(item) {
				
			},
			
			edit(item) {
				this.currentItem = item;
				this.isShowEditDialog = true;
			},
			closeEditDialog() {
				this.isShowEditDialog = false;
			},
		},
		mounted() {
			this.fetchData();
		},
	}
</script>

<style lang="scss" scoped>
</style>